<template>
	<view>

		<view class="info_tab">
			<view class="" style="background-color: #fff;border-radius: 10px;">
				<view class="tab_one">
					<text class="one_tx">头像</text>
					<view class="one_ri u-flex" @click="show = true">
						<image class="ri_img" style="width: 56px;height: 56px; border-radius: 50%;"
							:src="userInfo.avatar" mode=""></image>
					</view>
				</view>
				<!-- <u-action-sheet :list="list" v-model="show" @click="ipload()"></u-action-sheet> -->
				<view class="tab_one" @click="open_name">
					<text class="one_tx">昵称</text>
					<view class="one_ri u-flex">
						<text style="padding-right: 11px;">{{userInfo.username}}</text>
						<u-icon name="arrow-right" color="#7D8083"></u-icon>
					</view>
				</view>
				<view class="tab_one">
					<text class="one_tx">会员等级</text>
					<view class="one_ri u-flex">
						<text style="padding-right: 11px;font-size: 14px;">Level:{{userInfo.level}}</text>
						<!-- <u-icon name="arrow-right" color="#7D8083"></u-icon> -->
					</view>
				</view>
			</view>
		</view>
		<u-modal @confirm='name_confirm' :show-cancel-button='true' confirm-color='#FF4040' v-model="shows">
			<view class="slot-content">
				<view style="padding: 15px;">
					<u-input :show-confirmbar='false' v-model="new_name" type="text" placeholder='请输入新昵称'
						:border="true" />
				</view>
			</view>
		</u-modal>
		<view class="footer" @tap="submit">
			<button class="fot" type="default">退出登录</button>
		</view>

	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	// import config from '../../../common/config/index.js'
	export default {
		data() {
			return {
				new_name: '',
				shows: false,
				show: false,
				background: {
					backgroundColor: '#ffffff',
				},
				action: '',
				list: [{
					text: '从相册选择照片',
					color: '#000',
					fontSize: 28,

				}],
				// imgurl: config.imgurl,
				avart: '',
				data: '',
				inf: '',
			}

		},
		computed: {
			...mapGetters(['userInfo']),
		},
		onShow() {
			this.me()

		},
		onLoad() {


		},
		methods: {
			...mapActions(['getUserInfo']),
			zhuxiao() {
				uni.showModal({
					content: '是否注销账号？',
					success(res) {
						if (res.confirm) {
							uni.removeStorageSync('token')
							uni.showToast({
								icon: 'none',
								title: '注销成功'
							})
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/me/login/login'
								})
							}, 1000)
						}
					}
				})
			},
			async common() {
				let res = await this.$http.index.common()
				if (res.code == 1) {
					this.inf = res.data
				}
			},
			setpassword() {
				uni.navigateTo({
					url: '/pages/me/password/password'
				})
			},
			//修改名称
			async name_confirm() {
				let res = await this.$http.index.username({
					username: this.new_name,
					nickname: this.new_name,
				});
				if (res.code == 1) {
					this.shows = false
					// console.log(this.new_name);
					this.me()
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					});
				}

			},
			open_name() {
				this.shows = true
				this.new_name = this.data.username
			},
			//忘记密码
			reset() {
				uni.navigateTo({
					url: '/pages/me/login/forgot?phone=' + this.data.mobile
				})
			},
			version() {
				plus.runtime.getProperty(plus.runtime.appid, (info) => {
					console.log(JSON.stringify(info));
					this.version = info.version;
				})
			},
			yinsi() {
				uni.navigateTo({
					url: '../xiayi/xiayi?id=3'
				})
			},
			yonghu() {
				uni.navigateTo({
					url: '../xiayi/yinsi?id=6'
				})
			},
			async me() {
				this.getUserInfo()
					.then(res => {

						uni.stopPullDownRefresh();
					})
					.catch(e => {
						uni.stopPullDownRefresh();
					});
			},
			async token() {
				uni.request({
					url: this.imgurl + 'qiniu/index/params',
				}).then((res) => {
					uni.setStorageSync('qiqutoken', res[1].data.data.qiniutoken)
				})
			},
			async submit() {
				// let res = await this.$http.index.logout({})
				// if (res.code == 1) {
				uni.showToast({
					icon: 'none',
					title: '退出成功',
					duration: 1000,
				})
				uni.removeStorageSync('token')
				setTimeout(() => {
					uni.navigateTo({
						url: '../login/login'
					})
				}, 1000)
				// } else {

				// }
			},
			name() {
				uni.navigateTo({
					url: 'username/username'
				})
			},
			phone() {
				uni.navigateTo({
					url: '../xiuphone/xiuphone'
				})
			},
			adress() {
				uni.navigateTo({
					url: '../../address/address'
				})
			},
			ipload(e) {
				console.log(e);
				let that = this;
				let qiqutoken = uni.getStorageSync('qiqutoken')
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(chooseImageRes) {
						console.log(chooseImageRes);
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: that.imgurl +
								'common/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							// header: {
							// 	'Content-Type': 'multipart/form-data',
							// },
							formData: {
								'qiniutoken': qiqutoken
							},
							success: (uploadFileRes) => {

								let a = JSON.parse(uploadFileRes.data)
								that.avart = a.data.fullurl
								that.acvter()
								console.log(that.avart);
							}
						});
					}
				});
			},
			async acvter() {
				let res = await this.$http.index.usavter({
					avatar: this.avart
				})
				console.log(res);
				if (res.code === 1) {
					uni.showToast({
						icon: 'none',
						title: '修改成功'
					})
					this.me()
					// setTimeout(() => {
					// 	uni.navigateBack({
					// 		delta: 1
					// 	})
					// }, 500)
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					});

				}
			},
		}
	}
</script>
<style>
	page {
		background-color: #F7F8FA;
	}
</style>
<style scoped lang="scss">
	/deep/.u-back-text {
		padding-left: 2px;
		font-size: 18px !important;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 25px;
		color: #000000 !important;
	}

	.info_tab {
		padding: 10px 15px 14px 15px;
	}

	.tab_one {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px;
		border-bottom: solid 1px #eee;

		&:last-child {
			border-bottom: none;
		}
	}

	.fot {
		background: #F22828;
		// box-shadow: 0px 3px 6px rgba(0, 54, 75, 0.42);
		opacity: 1;
		border-radius: 10px;
		/* opacity: 0.5; */
		/* border-radius: 4px; */
		height: 50px;
		font-size: 15px;
		font-weight: bold;
		line-height: 50px;
		color: #FFFFFF;
		/* opacity: 0.5; */
	}

	.footer {
		// position: fixed;
		width: 92%;
		margin: 0px auto;
		// bottom: 30px;
		// left: 4%;
	}
</style>